<template>
  <div class="gl_heightFull gl_contentBox">
    <div class="nav">
      <div>
        <span class="nav_title">道馆名称</span>
        <span class="nav_text">{{ $route.query.name }}</span>
      </div>
      <div>
        <span class="nav_title">提交时间</span>
        <span v-if="tableData[0]" class="nav_text">{{ tableData[0].creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
      </div>
    </div>
    <div style="margin-top:15px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column label="序号" type="index" align="center" width="55" />
        <el-table-column label="姓名" align="center" width="54">
          <template slot-scope="{row}">
            <!-- <img class="roodsPhoto" :src="getStaticFileUrl(row.imagePath)" alt=""> -->
            <PersonalImage :imgurl="row.imagePath" imgheight="60px" />
          </template>
        </el-table-column>
        <el-table-column prop="studentName" min-width="100" />
        <el-table-column label="证件号" prop="idCardNumber" min-width="145" />
        <el-table-column label="联系方式" prop="phoneNumber" min-width="100" />
        <el-table-column label="当前级别" align="center" :min-width="80">
          <template slot-scope="{row}">
            <span v-for="(item, index) in dict.duanType" :key="index">{{ item.code == row.duanTypeCode ? item.value : '' }}</span>
            {{ row.duanTypeCode !== null && row.levelTypeCode !== null ? '/':'' }}
            <span v-for="(item, index) in dict.levelType" :key="index + item">{{ item.code == row.levelTypeCode ? item.value : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报级别" align="center" :min-width="80">
          <template slot-scope="{row}">
            <span v-for="(item,index) in row.duanExamStudentDuans" :key="index">{{ item.duan.name }} {{ row.duanExamStudentDuans.length > 0 ? row.duanExamStudentDuans.length - 1 === index ? '': '/' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="教练" align="center" prop="coachName" />
        <el-table-column label="会员费" align="center">
          <template slot-scope="{row}">
            <span v-if="row.memberFeeTypeCode !== null">
              {{ row.memberFeeTypeCode === 'new'?'新增':'续费' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="会员号" align="center" prop="memberNumber" />
        <el-table-column label="缴纳年限" align="center" prop="paymentYearTime" />
        <el-table-column label="申报金额" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat( row.requestAmount * 100) / 10000 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="会费金额" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat( row.memberAmount * 100) / 10000 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="其他费用" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat( row.otherAmount * 100) / 10000 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="机构" align="center" prop="organizationUnitName" min-width="120" />
      </el-table>
    </div>
    <div class="foot">
      <el-button size="mini" :disabled="disbtn === 'true'" @click="close()">驳回</el-button>
      <el-button type="primary" :disabled="disbtn === 'true'" :loading="submitLoading" size="mini" @click="submit()">通过审核</el-button>
    </div>
    <!-- 驳回审核 -->
    <el-dialog
      title="驳回原因"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="530px"
    >
      <el-form ref="ruleForm" class="gl_form_mini" :model="DuanExamEntryApproveInput" style="padding: 0 30px" :rules="ruleForm" label-width="130px">
        <div>
          <div>
            <el-form-item label="请输入驳回原因" prop="approveRemark">
              <el-input
                v-model="DuanExamEntryApproveInput.approveRemark"
                type="textarea"
                placeholder="请输入内容"
                show-word-limit
                :rows="3"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" size="mini" @click="tosubmit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.Page"
        :page-size="Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import PersonalImage from '@/components/PersonalImage/index';
import { mapState, mapActions } from 'vuex';
import { api_GET_ClubDuanExamEntryApprovalIdDuanExamStudents, api_PUT_ClubDuanExamEntryApprovalIdApprovalStatus } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO, DuanExamEntryApproveInput } from '@/lib/form/hall/swaggerForm';
export default {
  components: {
    PersonalImage
  },

  data() {
    return {
      disbtn: 'false',
      DuanExamEntryApproveInput: new DuanExamEntryApproveInput(),
      dialogVisible: false,
      tableData: [],
      tableLoading: false,
      submitLoading: false,
      btnLoading: false,
      IsEnabled: '',
      Isstate: '',
      totalPage: 0,
      ruleForm: {
        approveRemark: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' }
        ]
      },
      Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO: new Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO() // 分道馆商城数据
    };
  },
  computed: {
    currentInfo () {
      return this.$store.state.user.info;
    },
    ...mapState({
      dict: state => state.dict.dict,
      user: state => state.user.currentOU
    })
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        if (!val) {
          this.$refs['ruleForm'].resetFields();
          this.DuanExamEntryApproveInput = new DuanExamEntryApproveInput();
        }
      }
    }
  },
  created() {
    this.getDict();
    this.gettablelist();
    this.disbtn = this.$route.query.disbtn + '';
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取考试详情列表
    gettablelist(page) {
      this.tableLoading = true;
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.IncludeDuanExamRequestDuans = true;
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.IncludeDuanExam = true;
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.IncludeRegisterStudent = true;
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.Page = page || 1;
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.SkipCount = (this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.Page - 1) * this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.MaxResultCount;
      api_GET_ClubDuanExamEntryApprovalIdDuanExamStudents(this.$route.query.rid, this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO).then(res => {
        this.totalPage = res.totalCount;
        this.tableData = res.items;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 驳回
    close() {
      this.dialogVisible = true;
      // this.$router.push({ name: 'Examtype' });
    },
    // 分页按钮
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubDuanExamEntryApprovalIdDuanExamStudentsQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    submit() {
      this.DuanExamEntryApproveInput.approveStatusCode = 'Approved';
      api_PUT_ClubDuanExamEntryApprovalIdApprovalStatus(this.$route.query.rid, this.DuanExamEntryApproveInput).then(res => {
        this.$message({
          type: 'success',
          message: '审核通过'
        });
        this.$router.go(-1);
        this.disbtn = true;
        this.gettablelist();
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 驳回原因
    tosubmit(formName) {
      this.btnLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.DuanExamEntryApproveInput.approveStatusCode = 'NotApproved'; //  审核Code type: string
          api_PUT_ClubDuanExamEntryApprovalIdApprovalStatus(this.$route.query.rid, this.DuanExamEntryApproveInput).then(res => {
            this.btnLoading = false;
            this.$message({
              type: 'success',
              message: '驳回成功'
            });
            this.gettablelist();
            this.$router.go(-1);
            this.disbtn = true;
            this.dialogVisible = false;
          }, error => {
            this.btnLoading = false;
            this.dialogVisible = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        } else {
          this.btnLoading = false;
          this.$message('请输入驳回原因');
          return false;
        }
      });
    }
  }

};
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: flex-start;
}
.nav>div {
  margin-right: 80px;
}
.nav>div>span:nth-of-type(1){
  margin-right: 8px;
}
.nav_title{
font-size: 14px;
color: rgb(58, 58, 58);
font-weight: 900;
}
.nav_text {
font-size: 13px;
font-weight: 900;
color: rgb(207, 209, 209);
}
.foot{
  margin-top:15px;
  display: flex;
  justify-content: center;
}

</style>
